<template>
  <div>
    <el-dialog title="订单详情" :visible.sync="show" width="1000px"
      v-if="orderDetail" append-to-body>
      <el-row>
        <el-col :span="8" style="background: rgba(244, 247, 250, 1); height: 180px">
          <div>
            <div style="width: 100%; margin-top: 35px; height: 16px; line-height: 16px; font-size: 12px; display: flex; justify-content: center; color: rgba(51, 51, 51, 1);">
              订单编号：{{orderDetail.identifier}}
            </div>
            <div style="width: 100%; margin-top: 26px; height: 24px; line-height: 24px; font-size: 16px; display: flex; justify-content: center; color: rgba(153, 153, 153, 1);">
              订单状态
            </div>
            <div style="width: 100%; margin-top: 10px; height: 36px; line-height: 36px; font-size: 24px; display: flex; justify-content: center; color: rgba(51, 51, 51, 1);">
              {{orderDetail.statusText}}
            </div>
          </div>
        </el-col>
        <el-col :span="16" style="height: 180px">
          <div style="display: flex; align-items: center; height: 100%">
            <el-steps :active="activeStep" align-center>
              <el-step title="订单创建" style="width: 350px" :description="orderDetail.createTime"></el-step>
              <el-step title="付款时间" :description="orderDetail.payTime"></el-step>
              <el-step title="发货时间" :description="orderDetail.sendTime"></el-step>
              <el-step title="收货时间" :description="orderDetail.receiveTime"></el-step>
              <el-step title="退货时间" :description="orderDetail.refundTime"></el-step>
            </el-steps>
          </div>
        </el-col>
      </el-row>

      <el-row class="detail">
        <el-col :span="12">
          <div style="padding: 15px 30px;">
            <div>
              <span class="title">收货人：</span>
              <span class="content">{{orderDetail.receiveName}}</span>
            </div>
            <div>
              <span class="title">电话：</span>
              <span class="content">{{orderDetail.receiveMobile}}</span>
            </div>
            <div>
              <span class="title">地址：</span>
              <span class="content">{{orderDetail.receiveProvinceName}} {{orderDetail.receiveCityName}} {{orderDetail.receiveDistrictName}}{{orderDetail.receiveAddress}}</span>
            </div>
            <div>
              <span class="title">供应商：</span>
              <span class="content">{{orderDetail.gongyingName}} {{orderDetail.gongyingMobile}}</span>
            </div>
            <div>
              <span class="title">采购商：</span>
              <span class="content">{{orderDetail.caigouName}} {{orderDetail.caigouMobile}}</span>
            </div>
            <div v-if="orderDetail.logicId == 0">
              <span class="title">收货类型：</span>
              <span class="content">门店自提</span>
            </div>
            <div v-else>
              <span class="title">快递公司：</span>
              <span class="content">{{orderDetail.logicRemark}}</span>
            </div>
            <div v-if="orderDetail.logicId == 0">
              <span class="title">快递单号：</span>
              <span class="content">无</span>
            </div>
            <div v-else>
              <span class="title">快递单号：</span>
              <span class="content">{{orderDetail.logicNo}}</span>
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div style="padding: 15px 30px;">
            <div>
              <span class="title">订单类型：</span>
              <span class="content">{{orderDetail.typeText}}</span>
            </div>
            <div>
              <span class="title">订单总数量：</span>
              <span class="content">{{orderDetail.totalNum}}</span>
            </div>
            <div v-if="orderDetail.scoreType && orderDetail.scoreType == 2">
              <span class="title">实付款：</span>
              <span class="content">¥{{ orderDetail.totalAmount }}+{{ orderDetail.payScore }}积分</span>
            </div>
            <div v-else-if="orderDetail.scoreType && orderDetail.scoreType == 1">
              <span class="title">实付款：</span>
              <span class="content">{{ orderDetail.payScore }}积分</span>
            </div>
            <div v-else>
              <span class="title">实付款：</span>
              <span class="content">¥{{orderDetail.totalAmount}}</span>
            </div>
            <div v-if="userInfo.type == 2">
              <span class="title">经纪人专区服务费比例：</span>
              <span class="content">{{orderDetail.serviceRate}}</span>
            </div>
            <div v-if="userInfo.type == 2">
              <span class="title">经纪人专区服务费：</span>
              <span class="content">¥{{orderDetail.totalServiceAmount}}</span>
            </div>
            <div>
              <span class="title">优惠券：</span>
              <span class="content">{{orderDetail.couponAmount}}</span>
            </div>
            <div>
              <span class="title">委托说明：</span>
              <span class="content">{{orderDetail.entrustRemark}}</span>
            </div>
          </div>
        </el-col>
      </el-row>
      <div style="display:flex;">
        <div style="display:flex; flex: 1;">
          <span class="title">订单留言：</span>
          <span class="remark">{{orderDetail.remark}}</span>
        </div>
        <div style="display:flex; flex: 1;">
          <span class="title">退款理由：</span>
          <span class="remark">{{orderDetail.refundReason}}</span>
        </div>
      </div>
      <div v-if="orderDetail.type == 31 && orderDetail.couponRecordYfId">
        <br/>
        运费券：已使用
      </div>
      <br/>
      <div v-if="orderDetail.invoice && orderDetail.invoice.length > 0">
        <el-button @click="invoiceView" type="primary" size="mini">查看发票</el-button>
      </div>
      <br/>
      <el-card v-if="orderDetail.type == 31 && userInfo.type == 2" class="box-card" shadow="hover">
        <div slot="header" class="clearfix">
          <span>分润列表</span>
        </div>
        <el-table :data="orderDetail.splitSuppliers" fit highlight-current-row row-key="id" style="width: 100%;">
          <el-table-column label="供应商名称" prop="splitName" align="center" />
          <el-table-column label="分润比例" prop="splitRate" align="center" />
          <el-table-column label="分润金额" prop="splitAmount" align="center" />
          <el-table-column label="类型" align="center">
            <template slot-scope="{row}">
              <el-tag v-if="row.splitType == 1" type="success">供货供应商</el-tag>
              <div v-if="row.splitType == 2">
                <el-tag v-if="row.isCounter == 1" type="primary">专柜供应商</el-tag>
                <el-tag v-else-if="row.isCounter == 0 && !row.isGy" type="primary">分润供应商</el-tag>
                <el-tag v-else-if="row.isCounter == 0 && row.isGy" type="primary">产品供应商</el-tag>
              </div>
              <el-tag v-if="row.splitType == 3" type="warning">当前商家</el-tag>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
      
      <el-card style="margin-top: 30px" v-if="orderDetail.type !==13 && orderDetail.type !== 14" class="box-card" shadow="hover">
        <div slot="header" class="clearfix">
          <span style="color: rgba(102, 102, 102, 1);font-size: 14px;">供应商：{{orderDetail.gongyingName}}</span>
        </div>
        <el-table :data="orderDetail.detailList" style="width: 100%; font-size: 13px">
          <template v-for="(item,index) in orderDetail.type === 12 ? biddingHeader: header">
            <el-table-column :key="index" :label="item.label" align="center">
              <template slot-scope="{row}">
                <template v-if="item.value == 'priceText'">
                  <div v-if="orderDetail.scoreType && orderDetail.scoreType == 2">¥{{ row.priceText }}+{{ row.score }}积分</div>
                  <div v-else-if="orderDetail.scoreType && orderDetail.scoreType == 1">{{ row.score }}积分</div>
                  <div v-else>¥{{ row.priceText }}</div>
                </template>

                <template v-else-if="item.value == 'priceCount'">
                  <div v-if="orderDetail.scoreType && orderDetail.scoreType == 2">¥{{ row.priceCount }}+{{ row.scoreCount }}积分</div>
                  <div v-if="orderDetail.scoreType && orderDetail.scoreType == 1">{{ row.scoreCount }}积分</div>
                  <div v-else>¥{{ row.priceCount }}</div>
                </template>

                <template v-else>
                  {{row[item.value]}}
                </template>
              </template>
            </el-table-column>
          </template>
          <el-table-column v-if="orderDetail.type != 12" label="商品图片" align="center">
            <template slot-scope="{row}">
              <img @click="handleOpenImage" :src="row.image" min-width="70" height="70">
            </template>
          </el-table-column>
        </el-table>
      </el-card>

      <el-card style="margin-top: 30px" v-if="orderDetail.isStock" class="box-card" shadow="hover">
        <div slot="header" class="clearfix">
          <span style="color: rgba(102, 102, 102, 1);font-size: 14px;">股票信息</span>
        </div>
        <el-row :gutter="20">
          <el-col :span="12">
            <div class="item_bg">
              <div class="item_label">港股账户：</div>
              <div class="item_value">{{ orderDetail.stockNo }}</div>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="item_bg">
              <div class="item_label">港股姓名：</div>
              <div class="item_value">{{ orderDetail.stockName }}</div>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <div class="item_bg">
              <div class="item_label">港股身份证：</div>
              <div class="item_value">{{ orderDetail.stockCardNo }}</div>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <div class="item_bg">
              <div class="item_label">港股身份证正面：</div>
              <el-image v-if="orderDetail.stockCardFront" style="width: 100px; height: 100px" :src="orderDetail.stockCardFront"
                :preview-src-list="[orderDetail.stockCardFront]">
              </el-image>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="item_bg">
              <div class="item_label">港股身份证反面：</div>
              <el-image v-if="orderDetail.stockCardBack" style="width: 100px; height: 100px" :src="orderDetail.stockCardBack"
                :preview-src-list="[orderDetail.stockCardBack]">
              </el-image>
            </div>
          </el-col>
          <el-row :gutter="20">
          <el-col :span="12">
            <div class="item_bg">
              <div class="item_label">港股账户截图：</div>
              <el-image v-if="orderDetail.stockNoImage" style="width: 100px; height: 100px" :src="orderDetail.stockNoImage"
                :preview-src-list="[orderDetail.stockNoImage]">
              </el-image>
            </div>
          </el-col>
        </el-row>
        </el-row>
      </el-card>

      <div slot="footer" class="dialog-footer">
        <el-button @click="show = false">
          取消
        </el-button>
        <el-button type="primary" @click="show = false">
          确定
        </el-button>
      </div>

      <el-dialog title="商品图片" width="550px" v-if="imageVisible" :visible.sync="imageVisible" append-to-body>
        <img :src="goodImage">
      </el-dialog>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: 'OrderDetail',
  props: {
    visible: false,
    orderDetail: {
      type: Object,
      default: null
    },
  },
  components: {
    
  },
  data() {
    return {
      show: this.visible,
      header: [
        { label: '商品名称', value: 'name' },
        { label: '规格名称', value: 'productSkuName' },
        { label: '定价类型', value: 'priceTypeText' },
        { label: '定价', value: 'priceText' },
        { label: '数量', value: 'num' },
        { label: '合计金额', value: 'priceCount' },
      ],
      // 竞价交易订单要特殊处理
      biddingHeader: [
        { label: '商品名称', value: 'name' },
        { label: '规格名称', value: 'productSkuName' },
        { label: '定价类型', value: 'priceTypeText' },
        { label: '数量', value: 'num' },
      ],
      activeStep: 0,
      imageVisible: false,
      goodImage: ''
    }
  },
  computed: {
    ...mapGetters(["userInfo"]),
  },
  watch: {
    visible(val) {
      this.show = val
      if (this.show) {
        if (this.orderDetail.detailList.length > 0) {
          this.goodImage = this.orderDetail.detailList[0].image
        }
      }
    },
    show(val) {
      this.$emit('update:visible', val)
    }
  },
  methods: {
    handleOpenImage() {
      this.imageVisible = true
    },
    closeViewer() {
      this.imageVisible = false
    },
    invoiceView() {
      window.open(this.orderDetail.invoice, '_blank')
    }
  },
  created() {
    
  },
  mounted() {
    
  },
  beforeCreate() {},
  beforeMount() {},
  beforeUpdate() {},
  updated() {
    this.$nextTick(() => {
      if (this.orderDetail.refundTime) {
        this.activeStep = 5
      } else if (this.orderDetail.receiveTime) {
        this.activeStep = 4
      } else if (this.orderDetail.sendTime) {
        this.activeStep = 3
      } else if (this.orderDetail.payTime) {
        this.activeStep = 2
      } else {
        this.activeStep = 1
      }
    })
  },
  beforeDestroy() {},
  destroyed() {},
  activated() {},
}
</script>

<style lang='scss' scoped>
  .el-step {
    ::v-deep .el-step__title {
      font-size: 12px !important;
    }
  }

  .detail {
    .el-row:nth-of-type(n+2) {
      margin-top: 30px;
    }
    .el-col {
      border: 1px solid rgba(218, 224, 232, 1);
    } 
  }

  .title {
    height: 30px; 
    line-height: 30px; 
    font-size: 14px; 
    color: rgba(153, 153, 153, 1);
  }

  .content {
    height: 30px; 
    line-height: 30px; 
    font-size: 14px; 
    color: rgba(51, 51, 51, 1);
  }

  .remark {
    flex: 1;
    height: 60px;
    font-size: 14px; 
    color: rgba(51, 51, 51, 1);
    line-height: 30px;
  }

  .supplier {
    width: 100%;
    height: 60px;
    padding-left: 23px;
    border: 1px rgb(230, 235, 245) solid;
    line-height: 60px;
    font-size: 14px;
  }

  .item_bg {
    display: flex;
    margin: 5px 5px;

    .item_label {
      height: 20px;
      line-height: 20px;
    }
    .item_value {
      height: 20px;
      line-height: 20px;
    }
  }
</style>